import React, { useEffect, useLayoutEffect, useState } from "react";

export const TestUseLayoutEffect: React.FC = () => {
    const [count, setCount] = useState(Math.ceil(Math.random() * 200));

    const handleClick = () => {
        setCount(0);
    };


    useLayoutEffect(() => {
        if (count == 0) {
            console.log("组件渲染完成前", count)
            setCount(Math.ceil(Math.random() * 200));
        }
    })
    useEffect(()=>{
        console.log("组件渲染完成后", count)
    },[]);
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={handleClick}>Click</button>
        </div>
    );
}